<template>
	<view class="container">
		<view class="tabs_list">
			<view :class="order_obj.status == item.status ? 'active':''" v-for="(item,index) in tab_list" @tap.stop="chage_tab(item.status)">
				{{item.name}}
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="order_obj.pageNum += 1,load_order()">
			<view class="coll_none" v-if="order_list.length ==0">
				暂无相关订单
			</view>
			<view class="coll" v-else>
				<view class="order" v-for="(item,index) in order_list">
					<view class="product_admin">
						{{item.order_product[0].product_additional.admin_name}}的店铺 <text class="iconfont icon-enter"></text>
					</view>
					<view class="product_detail">
						<view class="mores">
							<view class="product_detail_image">
								<image :src="item.order_product[0].product_title_image" mode="scaleToFill"></image>
							</view>
							<view class="product_detail_detail">
								<view class="product_detail_detail_name">
									{{item.order_product[0].product_name}}
								</view>
								<view class="product_detail_detail_sku">
									{{item.order_product[0].product_option.list0_name}},{{item.order_product[0].product_option.list1_name}}
								</view>
								<view class="product_detail_detail_num">
									<text>￥{{parseFloat(item.order_product[0].product_price).toFixed(2)}}</text> 
									<span>x</span> 
									<text>{{item.order_product[0].product_number}}</text>
								</view>
							</view>
						</view>
						<view class="product_detail_more">
							<text>共{{item.order_product.length}}种商品</text>
						</view>
						<view class="product_detail_btn">
							<button type="warn" v-if="item.status == 0" @tap.stop="close_or(item._id)">取消订单</button>
							<button type="warn" @tap.stop="navTo(item._id)">查看详情</button>
							<button type="primary" v-if="item.status == 0" @tap.stop="navTo(item._id)">去付款</button>
							<button type="primary" v-if="item.status != 0&&item.status != 1&&item.status != 99" @tap.stop="go_wuliu(item._id)">查看物流</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	const user = uni.getStorageSync('userInfos');
	export default {
		data(){
			return {
				order_obj:{
					pageNum:0,
					pageSize:10,
					user_id: user._id,
					order_type: 8,
					status: 99
				},
				order_list:[],
				tab_list: [{
					name: '全部',
					status: 99
				},{
					name: '待付款',
					status: 0
				},{
					name: '待发货',
					status: 1
				},{
					name: '待收货',
					status: 2
				},{
					name: '待评价',
					status: 3
				},{
					name: '已完成',
					status: 6
				}]
			}
		},
		onLoad(option) {
			this.order_obj.status = parseInt(option.status);
		},
		onShow() {
			this.order_obj.pageNum = 0;
			this.order_list = [];
			this.load_order();
		},
		methods:{
			async load_order(){
				uni.showLoading({title:'加载中...',mask:true})
				console.log(this.order_obj)
				let res = await api.uniCloudApi(api.publicFun.order,this.order_obj);
				if(res){
					uni.hideLoading();
					this.order_list = this.order_list.concat(res);
				}else {
					uni.hideLoading();
				}
			},
			//取消订单
			async close_or(order_id){
				let that = this;
				uni.showModal({
					title:'提示',
					content:'取消后需要重新下单,当前订单关闭，确定取消吗',
					async success(e) {
						if(e.confirm){
							let res = await api.uniCloudApi(api.publicFun.order,{order_type:2,order_id: order_id});
							if(res.updated){
								that.chage_tab(that.order_obj.status);
							}
						}
					}
				})
			},
			go_wuliu(){
				uni.showToast({
					icon:'none',
					title:'暂无物流'
				})
			},
			chage_tab(status){
				this.order_list = [];
				this.order_obj.pageNum = 0;
				this.order_obj.status = status;
				this.load_order();
			},
			navTo(id){
				uni.navigateTo({
					url:'./detail_order?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabs_list{
		width: 100%;
		height: 40px;
		background-color: #e71c15;
		border-top: 1px solid #ff1010;
		display: flex;
		view,
		.active{
			width: calc(100% / 6);
			text-align: center;
			line-height: 40px;
			color: #FFFFFF;
		}
		.active{
			background-color: #b60d0d;
		}
	}
	scroll-view{
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - 84px);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - 40px);
		/* #endif */
		.coll_none{
			width: 100%;
			text-align: center;
			height: 800rpx;
			line-height: 800rpx;
			font-size: 45rpx;
			color: #d4d4d4;
		}
		.coll{
			width: 100%;
			.order{
				width: 95%;
				padding: 1% 2.5%;
				border-bottom: 1px solid #f5f5f5;
				.product_admin{
					font-weight: bold;
					font-family: '楷体';
					font-size: 28rpx;
					color: #007AFF;
				}
				.product_detail{
					.mores{
						width: 100%;
						display: flex;
						margin: 10rpx 0;
						.product_detail_image{
							width: 120rpx;
							height: 120rpx;
							border-radius: 5rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 5rpx;
							}
						}
						.product_detail_detail{
							width: calc(100% - 150rpx);
							padding: 0 15rpx;
							.product_detail_detail_name{
								height: 32rpx;
								line-height: 32rpx;
								overflow: hidden;
								color: #333333;
								font-size: 23rpx;
								font-weight: bold;
							}
							.product_detail_detail_sku{
								height: 45rpx;
								line-height: 45rpx;
								font-size: 21rpx;
								color: #6D6D72;
							}
							.product_detail_detail_num{
								height: 43rpx;
								line-height: 43rpx;
								text-align: right;
								color: $uni-back-color;
								text{
									font-size: 29rpx;
								}
								span{
									margin: 0 5px;
								}
							}
						}
					}
					.product_detail_more{
						width: 95%;
						padding: 0 2.5%;
						text-align: right;
						color: #2653e4;
						font-size: 20rpx;
						height: 30rpx;
						line-height: 30rpx;
					}
					.product_detail_btn{
						width: 100%;
						display: flex;
						height: 65rpx;
						justify-content: flex-end;
						button{
							width: 23%;
							margin: 10rpx 1%;
							height: 45rpx;
							line-height: 45rpx;
							font-size: 18rpx;
							border-radius: 25rpx;
						}
					}
				}
			}
		}
	}
</style>
